<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        
    </h:head>
    <h:body style="background-color: background;">
        <h:form id="frmInvitation">
    <p:panelGrid columns="8" style=" max-width: 85%;margin-top: 2%; margin-left: auto ; margin-right: auto;">
    
        <p:outputLabel value="Logged User: #{userBean.name}" />
        
        <p:commandLink  action="#{calendarBean.home()}" value="Home"/>
        <p:commandLink  action="#{calendarBean.invitation()}" value="invitation"/>
        <p:commandLink  action="#{calendarBean.notification()}" value="notification"/>
        <p:commandLink  action="#{calendarBean.favorite()}" value="favorite"/>
        
        <h:panelGrid columns="3" style="max-width: fit-content" >
            <h:outputLabel for="searchUsr" value="Search User: " style="border-collapse: separate; color: rgb(79,79,79); font-family: Arial,sans-serif; font-size: 18px;" />
            <p:autoComplete id="autoUser" value="#{autoCompleteUsers.searched}" completeMethod="#{autoCompleteUsers.completeText}" forceSelection="true"/>
            <p:commandButton id="cmdSubmit" value="Submit" icon="ui-icon-check" action="#{autoCompleteUsers.visitUser}" update="messages" />
        </h:panelGrid>
        
        <h:panelGrid columns="3" style="max-width: fit-content">
            <h:outputLabel for="searchEvt" value="Search Event: " />
            <p:autoComplete id="autoEvent" value="#{autoCompleteEvent.searched}" completeMethod="#{autoCompleteEvent.completeText}" forceSelection="true"/>
            <p:commandButton id="cmdSubmitEvent" value="Submit" icon="ui-icon-check" action="#{autoCompleteEvent.visitEvent}" update="messages" />
        </h:panelGrid>
        
        <p:commandLink  action="#{loginBean.logout()}" value="logout"/>
    </p:panelGrid>
    <p:growl id="messages" autoUpdate="true" globalOnly="true" showDetail="true" life="3000" />
     
    <h:panelGrid style="margin-top: 5%; margin-left: auto ; margin-right: auto; width: 95%">
    <p:dataGrid var="invitation" value="#{invitationGridView.invitations}" columns="3" layout="grid"
        rows="12" paginator="true" id="invitationGrid"
        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="6,12,16">
 
        <f:facet name="header">
            Invitation
        </f:facet>
 
        <p:panel header="#{invitation.event.title}" style="text-align:center">
            <h:panelGrid columns="1" style="width:100%">
 
                <h:outputText value="#{invitation.event.title}" />
 
                <p:commandLink update=":frmInvitation:invited" oncomplete="PF('invitationDialog').show()" title="View Detail">
                    <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
                    <f:setPropertyActionListener value="#{invitation}" target="#{invitationGridView.selectedInvitation}" />
                </p:commandLink>
            </h:panelGrid>
        </p:panel>
 
    </p:dataGrid>
    </h:panelGrid>
 
    <p:dialog header="Invitation info" widgetVar="invitationDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="invited" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty invitationGridView.selectedInvitation}" columnClasses="label,value">
 
                <h:outputText value="Creator: " />
                <h:outputText value="#{invitationGridView.selectedInvitation.event.creator}" />
                
                <h:outputText value="Title: " />
                <h:outputText value="#{invitationGridView.selectedInvitation.event.title}" />
 
                <h:outputText value="Start: " />
                <h:outputLabel id="start" value="#{invitationGridView.selectedInvitation.event.startTime.time}" >
                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="GMT+1" />
                </h:outputLabel>
 
                <h:outputText value="End: " />
                <h:outputLabel id="end" value="#{invitationGridView.selectedInvitation.event.endTime.time}" >
                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="GMT+1" />
                </h:outputLabel>
 
                <h:outputText value="City: " />
                <h:outputText value="$#{invitationGridView.selectedInvitation.event.place}" />
                
                <h:outputText value="Answer: " />
                
                <h:panelGrid columns="2" style="text-align:center;" >
                <p:commandButton id="acceptButton"  value="Accept" update="invitationGrid" actionListener="#{invitationGridView.acceptInvitation}" oncomplete="PF('invitationDialog').hide();" />
                <p:commandButton id="refuseButton" value="Refuse" update="invitationGrid" actionListener="#{invitationGridView.refuseInvitation}" oncomplete="PF('invitationDialog').hide();" />
                </h:panelGrid>
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>
    
    
    

 
<style type="text/css">
    .value {
        width: 1000px;
    }
</style>
    </h:body>
</html>


